{% extends '../common/layout.njk' %}
{% set activeNav = 'matrix3d工具'%}
{% block style %}
{{ super() }}
<link rel="stylesheet" href="/public/css/matrix3d.min.css">
{% endblock %}
{%block description%}{{super()}}|快速得出matrix3d值的小工具{%endblock%}
{%block keywords%}
{{super()}},matrix3d
{%endblock%}
{%block title%}
{{super()}}|快速得出matrix3d值的小工具
{%endblock%}
{% block body %}
<div class="matrix3d app">
    <div class="container-fluid content">
        <main class="main">
            <div id="layout" class="bg-light">
                <img src="/public/img/matrix3d/img.png" id="reference">
                <div id="change" class="video-wrapper">
                    <video src="/public/img/matrix3d/video.mp4" autoplay loop></video>
                </div>
            </div>
        </main>
        <aside class="aside bg-light">
            <h3>matrix3d 小工具</h3>
            <div class="col-sm-12 value-wrapper">
                <table class="matrix3d-value"><tr><td>拖动四个黑点进行变换，此处将显示matrix3d的值</td></tr></table>
            </div>
            <form id="reference-form">
                <h4>参照图片</h4>
                <ol class="tips">
                    <li>width和height如果不设置,则默认为auto</li>
                    <li>上传图片的优先级大于图片url</li>
                </ol>
                <div class="form-group row">
                    <label for="reference-width" class="col-sm-4 col-form-label">宽度：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input type="number" class="form-control" id="reference-width" name="reference-width" min="0">
                            <div class="input-group-append">
                                <div class="input-group-text">px</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="reference-height" class="col-sm-4 col-form-label">高度：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input type="number" class="form-control" id="reference-height" name="reference-height" min="0">
                            <div class="input-group-append">
                                <div class="input-group-text">px</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="reference-url" class="col-sm-4 col-form-label">图片url: </label>
                    <div class="col-sm-8">
                        <input type="text" id="reference-url" name="reference-url" class="form-control">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="reference-upload" class="col-sm-4 col-form-label">上传图片: </label>
                    <div class="col-sm-8">
                        <input type="file" id="reference-upload"  class="form-control-file" name="reference-upload" accept="image/*">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-8 offset-sm-4">
                        <button type="submit" class="btn btn-primary">提交</button>
                        <button type="reset" class="btn btn-default">重置</button>
                    </div>
                </div>
            </form>
            <form id="change-form">
                <h4>需要做matrix3d变换的图片或视频</h4>
                <ol class="tips">
                    <li>width和height如果不设置,则默认为auto</li>
                    <li>视频的width/height无法非等比更改,因此建议视频的width/height只修改一个值</li>
                </ol>
                <div class="form-group row">
                    <label for="change-width" class="col-sm-4 col-form-label">width: </label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input type="number" id="change-width" class="form-control" name="change-width" min="0">
                            <div class="input-group-append">
                                <div class="input-group-text">px</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="change-height" class="col-sm-4 col-form-label">height: </label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input type="number" id="change-height" class="form-control" name="change-height" min="0">
                            <div class="input-group-append">
                                <div class="input-group-text">px</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="change-upload" class="col-sm-4 col-form-label">上传图片: </label>
                    <div class="col-sm-8">
                        <input type="file" id="change-upload"  class="form-control-file" name="change-upload" accept="image/*,video/*">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-8 offset-sm-4">
                        <button type="submit" class="btn btn-primary">提交</button>
                        <button type="reset" class="btn btn-default">重置</button>
                    </div>
                </div>
            </form>
        </aside>
    </div>
</div>
{% endblock %}
{% block script %}
{{ super() }}
<script type="text/javascript" src="/public/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/public/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/public/js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="/public/js/numeric-1.2.6.min.js"></script>
<script type="text/javascript" src="/public/js/matrix3d.min.js"></script>
{% endblock %}